<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=dataset-default
-->

<!DOCTYPE html>

<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0 ;background-color: RGB(16,12,42)">
        <div id="container" style="height: 100%">
        </div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart1 = echarts.init(dom,'dark');
var app = {};

var option1;



var option1 = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['用户类型','工作日', '非工作日', '节假日', '非节假日'],
            ['注册用户', 3979,2960,2671,3686],
            ['非注册用户',607,1372,1065,842]
        ]
    },
    series: [{
  
        type: 'pie',
        radius: '20%',
        center: ['15%', '30%']
        // No encode specified, by default, it is '2012'.
    }, {
        type: 'pie',
        radius: '20%',
        center: ['40%', '30%'],
        encode: {
            itemName: '用户类型',
            value: '非工作日'
        }
    }, {
        type: 'pie',
        radius: '20%',
        center: ['15%', '75%'],
        encode: {
            itemName: '用户类型',
            value: '节假日'
        }
    }, {
        type: 'pie',
        radius: '20%',
        center: ['40%', '75%'],
        encode: {
            itemName: '用户类型',
            value: '非节假日'
        }
    }]
};


if (option1 && typeof option1 === 'object') {
    myChart1.setOption(option1);
}

        </script>

<h2 style="position: absolute;left: 430px;top: 10px;color: white">日期与租车情况的关系</h2>
    <h4 style="position: absolute;left: 230px;top: 440px;color: white">工作日租车情况</h4>
        <h4 style="position: absolute;left: 700px;top: 440px;color: white">非工作日租车情况</h4>
        <h4 style="position: absolute;left: 230px;top: 840px;color: white">节假日租车情况</h4>
        <h4 style="position: absolute;left: 700px;top: 840px;color: white">非节假日租车情况</h4>


    <iframe src="dataset-series-layout-by.html" width="600px" height="800px" scrolling="auto" frameborder="0" style="position: absolute;left: 1100px;top: 100px"></iframe>
        <iframe src="top5.html" width="700px" height="800px" scrolling="auto" frameborder="0" style="position: absolute;top: 980px"></iframe>
        <iframe src="weekday.html" width="1210px" height="800px" scrolling="auto" frameborder="0" style="position: absolute;left: 700px;top: 980px"></iframe>
    </body>
</html>
    